<template>
  <div class="wrapper">
    <div v-for="categoriesDetail in categoriesDetailData" :key="categoriesDetail.id">
      <div class="categoryTitle">{{ categoriesDetail.name }}</div>
      <ProductItem :products="categoriesDetail.products" />
    </div>
    
  </div>
</template>


<script>
import ProductItem from "./ProductItem";

//引入滚动插件
// import BScroll from "better-scroll";

export default {
  name: "ContentView",
  props: {
    categoriesDetailData: Array
  },
  components: {
    ProductItem
  },
  // beforeDestroy(){  //使用订阅要设置取消,不然会有BUG
  //   PubSub.unsubscribe('homeAddToCart')
  // }
};
</script>


<style lang="less" scoped>
.wrapper {
  // overflow-y: auto;
  // width: 100%;
  // margin-bottom: 1.25rem;
  // background-color: red;

  .categoryTitle {
    padding: 0 0.5rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 1rem;
    background: #f8f8f8;
    color: #666666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>